<template>
	<view class="bigBox">
		<view class="headerBox">
			参数设置
		</view>
		<view class="container">

			<!-- 工作模式 -->
			<view class="workmode">
				<view class="title">
					工作模式
				</view>
				<view class="modeBox">
					<view @click="deviceFun" class="device green">
						<image src="/static/parameterSettings/close.png" mode=""></image>
						设备关机
					</view>
					<view @click="modeFun" class="mode">
						<image src="/static/parameterSettings/link.png" mode=""></image>
						独立模式
					</view>
				</view>
			</view>
			<!-- 基础参数 -->
			<view class="baseData">
				<view class="title">
					基础参数
				</view>
				<view class="baseCon">
					<view class="baseItem">
						<view class="label">
							485地址
						</view>
						<view class="bottomCon">
							<input type="text" v-model="form.address" />
							<view class="rightBox">
								<image src="/static/parameterSettings/address.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="baseItem">
						<view class="label">
							风机启动温度
						</view>
						<view class="bottomCon">
							<input type="text" v-model="form.fanTemperature" />
							<view class="rightBox">
								<image src="/static/parameterSettings/f.png" mode=""></image>
								℃
							</view>
						</view>
					</view>
					<view class="baseItem">
						<view class="label">
							空调启动温度
						</view>
						<view class="bottomCon">
							<input type="text" v-model="form.airTemperature" />
							<view class="rightBox">
								<image src="/static/parameterSettings/x.png" mode=""></image>
								℃
							</view>
						</view>
					</view>
					<view class="baseItem">
						<view class="label">
							除尘启动时间
						</view>
						<picker mode="time" :value="time" start="00:01" end="23:59" @change="bindTimeChange">
							<view class="bottomCon bottomConLast">
								<view class="bottomConLastItem">

									<view class="time">
										{{form.hour}}
									</view>
									<view class="rightBox">
										<image src="/static/parameterSettings/time.png" mode=""></image>
									</view>
								</view>
								<view class="cen">:</view>
								<view class="bottomConLastItem">
									<view class="time">
										{{form.min}}
									</view>
									<view class="rightBox">
										<image src="/static/parameterSettings/time.png" mode=""></image>
									</view>
								</view>
							</view>
						</picker>

					</view>
				</view>
			</view>
			<!-- 保存设置 -->
			<view class="saveBox">
				<view class="btnBox" @click="saveFun">
					<image src="/static/parameterSettings/set.png" mode=""></image>
					保存设置
				</view>
			</view>
		</view>
		<tabbar active="3"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/Tab_bar.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				time: '',
				form: {
					address: 1,
					fanTemperature: 25,
					airTemperature: 28,
					hour: '08',
					min: 30
				}
			}
		},
		onLoad() {
			this.time = this.form.hour + ':' + this.form.min
		},
		methods: {
			// 设备关机
			deviceFun() {

			},
			// 独立模式
			modeFun() {

			},
			// 保存设置
			saveFun() {
				console.log(this.form)
			},
			// 选择时间
			bindTimeChange(e) {
				this.form.hour = e.detail.value.split(":")[0]
				this.form.min = e.detail.value.split(":")[1]
				this.time = e.detail.value
			}
		}
	}
</script>

<style lang="less" scoped>
	.bigBox {
		background: #f9fafb;
		min-height: 100vh;

		.headerBox {
			height: 52.5px;
			display: flex;
			justify-content: center;
			align-items: center;
			// border-bottom: 1px solid #E5E7EB;
			font-feature-settings: "kern" on;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
			background: #FFFFFF;
			font-family: Roboto;
			font-size: 15.75px;
			font-weight: 500;
		}

		.container {
			padding: 17.5px 14px 0 14px;
			box-sizing: border-box;
			font-family: Roboto;

			.workmode {
				height: 105px;
				border-radius: 10.5px;
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
				box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
				box-sizing: border-box;
				padding: 14px;
				margin-bottom: 20px;

				.title {
					height: 21px;
					line-height: 21px;
					font-family: Roboto;
					font-size: 14px;
					font-weight: 500;
					margin-bottom: 14px;
				}

				.modeBox {
					padding: 3.5px;
					background: #f9fafb;
					display: flex;
					margin-bottom: 20px;

					view {
						border-radius: 4px;
						height: 35px;
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-feature-settings: "kern" on;
						color: #4B5563;
						font-family: Roboto;
						font-size: 12.25px;
						font-weight: 500;

						image {
							margin-right: 7px;
						}
					}

					.device {
						image {
							width: 12.25px;
							height: 11.87px;
						}
					}

					.mode {
						image {
							width: 14.99px;
							height: 12.26px;
						}
					}

					.green {
						color: #FFFFFF;
						background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #22C55E;
						box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
					}
				}
			}

			.baseData {
				border-radius: 10.5px;
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
				box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
				box-sizing: border-box;
				padding: 14px;
				margin-bottom: 47px;

				.title {
					height: 21px;
					line-height: 21px;
					font-family: Roboto;
					font-size: 14px;
					font-weight: 500;
					margin-bottom: 14px;
				}

				.baseCon {

					.baseItem {
						margin-bottom: 14px;

						.label {
							height: 18px;
							line-height: 18px;
							color: #4B5563;
							font-size: 12.25px;
							margin-bottom: 6.5px;
						}

						.bottomCon {
							display: flex;
							justify-content: space-between;
							align-items: center;
							background: #F9FAFB;
							height: 46px;

							input {
								color: #374151;
								font-size: 14px;
								padding-left: 14px;
								width: 80%;
							}

							.rightBox {
								padding-right: 14px;
								flex: 1;
								display: flex;
								align-items: center;
								justify-content: flex-end;
								font-size: 12.25px;
								color: #9CA3AF;

								image {
									width: 14px;
									height: 14px;
									margin-right: 7px;
								}
							}
						}

						.bottomConLast {
							align-items: center;
							background: #FFFFFF;

							.bottomConLastItem {
								background: #F9FAFB;
								flex: 1;
								display: flex;
								align-items: center;
								height: 46px;

								.time {
									width: 100%;
									text-align: center;
								}
							}

							.cen {
								margin: 0 7px;
								color: #9CA3AF;
								font-size: 17.5px;
								font-weight: 500;
								height: 46px;
								line-height: 46px;
							}
						}
					}
				}
			}

			.saveBox {
				padding: 15px 14px;
				background: #FFFFFF;

				.btnBox {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 45.5px;
					border-radius: 4px;
					background: #387ef5;
					box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
					font-size: 14px;
					font-weight: 500;
					color: #FFFFFF;

					image {
						width: 12.25px;
						height: 12.25px;
						margin-right: 7px;
						vertical-align: middle;
					}
				}
			}
		}
	}
</style>